<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta content="B2B电商平台" name="description" />
<meta content="B2B电商平台" name="keyword" />

<title>B2B电商平台.销售额拓扑</title>
<link rel="icon" href="include/images/icss.ico" type="image/x-icon" />
<link rel="shortcut icon" href="include/images/icss.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="<%=path %>/include/css/global.css" />
<link rel="stylesheet" type="text/css" href="<%=path %>/include/css/style.css" />
<link rel="stylesheet" type="text/css" href="<%=path %>/include/css/pro.css" />
<link rel="stylesheet" type="text/css" href="<%=path %>/include/css/proManage.css" />
<link rel="stylesheet" type="text/css" href="<%=path %>/include/css/mmt_trading.css" />

<link rel="stylesheet" href="<%=path %>/include/JQuery ui/css/smoothness/jquery-ui-1.7.3.custom.css" type="text/css"></link>
<link rel="stylesheet" type="text/css" href="<%=path%>/include/pagination/page.css" media="all">
<script type="text/javascript" src="<%=path %>/include/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="<%=path %>/include/js/cookies.js"></script>
<script type="text/javascript" src="<%=path %>/include/js/icss.busin.js"></script>
<script type="text/javascript" src="<%=path %>/include/JQuery ui/js/jquery-ui-1.7.3.custom.min.js"></script>
<script type="text/javascript" src="<%=path %>/include/js/icss.common.js"></script>
<script type="text/javascript" src="<%=path%>/include/pagination/jquery.pagination.js"></script>
<script type="text/javascript" src="<%=path%>/include/pagination/init.js"></script>
<script type="text/javascript" src="<%=path%>/include/layer/layer.js"></script>	
<link href="<%=path %>/include/DatePicker/skin/WdatePicker.css" rel="stylesheet" type="text/css">
<script src="<%=path %>/include/DatePicker/WdatePicker.js" charset="UTF-8" type="text/javascript"></script>

<script type="text/javascript" src="<%=path%>/include/Highcharts-4.0.3/js/highcharts.js"></script>
<script type="text/javascript" src="<%=path%>/include/Highcharts-4.0.3/js/highcharts-3d.js"></script>
<script type="text/javascript" src="<%=path%>/include/Highcharts-4.0.3/js/highcharts-more.js"></script>
<style type="text/css">

thead th {
	border: 1px solid #ddd;
	font-weight: bold;
}

#auditGoodsList a {
	text-decoration: none;
}

#auditGoodsList td {
	padding: 4px 4px;
	border: 1px solid #ddd;
}
#lie th{
    border: 1px solid #ddd;

}
.search_lis_se input{
    height:24px;
}
.save{
    width:44px;
    height:24px;
    line-height:24px;   
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 0 -203px;
    border:0;
    cursor:pointer;
    font: 12px/1.5 arial,tahoma,\5b8b\4f53;
    margin: 0 0 0 5px;
    outline:none;
    background-image: url('<%=path%>/include/css/img/xs_bgx.png');   
}
.title_css{display:none;margin-bottom: 15px;border-radius:10px;width: 100%;height: 40px;text-align: center;line-height: 40px;background: #1fa3ff;font-size: 18px;color: #fff}

.no_data_css{background:#e0e0e0;display:none;border-radius:5px;height: 200px;width: 70%;margin: 30px 15%;border: 1px solid #e0e0e0;font-size: 20px;line-height: 200px;text-align: center;}

</style>

<script type="text/javascript">
$(function () {
	_queryList();
});

function _queryList(){
	_queryCategorySales();
	_queryBrandSales();
	_queryProductSales();
}

//平台品类销售额查询
function _queryCategorySales(){
	var begDate = $("#begDate").val();
	var endDate = $("#endDate").val();
	$.ajax({
		type:"post",
		url:"<%=path%>/salesTopology/queryCategorySales.do",
		data:{begDate:begDate,endDate:endDate},
		dataType:"json",
		success:function(data){
			if(data){
				var vals = [];
				for(var i=0;i<data.length;i++){
					var sell = data[i].REAL_MONEY;
					if(sell!=0)
						vals[i] = [data[i].CATEGORY_NAME,sell];
				}
				var title = "品类销售额扇形图";//begDate+"~"+endDate;
				//title = title == "~" ? "品类销售额扇形图" : title + "品类销售额扇形图";
				/*if(data[0].REAL_MONEY==0){
					$("#categoryDataId").hide();
					$("#categoryNoDataId").show();
				}else{
					$("#categoryNoDataId").hide();
					$("#categoryDataId").show();
				}*/
				if(data[0].REAL_MONEY==0){ vals[0] = ["暂无数据",0.01]}
				_pieChart("categoryDataId",title,vals);
			}
		}
	});
}

//品牌销售额查询
function _queryBrandSales(){
	var begDate = $("#begDate").val();
	var endDate = $("#endDate").val();
	$.ajax({
		type:"post",
		url:"<%=path%>/salesTopology/queryBrandSales.do",
		data:{begDate:begDate,endDate:endDate},
		dataType:"json",
		success:function(data){
			if(data){
				var cols = [];
				var vals = [];
				for(var i=0;i<data.length;i++){
					cols[i] = data[i].BRAND_NAME;
					vals[i] = data[i].REAL_MONEY;
				}
				var title = "品牌销售额柱状图";//begDate+"~"+endDate;
				//title = title == "~" ? "品牌销售额柱状图" : title + "品牌销售额柱状图";
				/*if(data[0].REAL_MONEY==0){
					$("#brandDataId").hide();
					$("#brandNoDataId").show();
				}else{
					$("#brandNoDataId").hide();
					$("#brandDataId").show();
				}*/
				_columnChart("brandDataId",title,cols,vals,"#fec52a");
			}
		}
	});
}

//商品销售额查询
function _queryProductSales(){
	var begDate = $("#begDate").val();
	var endDate = $("#endDate").val();
	$.ajax({
		type:"post",
		url:"<%=path%>/salesTopology/queryProductSales.do",
		data:{begDate:begDate,endDate:endDate},
		dataType:"json",
		success:function(data){
			if(data){
				var cols = [];
				var vals = [];
				for(var i=0;i<data.length;i++){
					var proName = data[i].PRODUCT_NAME;
					cols[i] = proName;//.length>5 ? proName.substring(0,5)+"..." : proName;;
					vals[i] = data[i].REAL_MONEY;
				}
				var title = "商品销售额柱状图";//begDate+"~"+endDate;
				//title = title == "~" ? "商品销售额柱状图" : title + "商品销售额柱状图";
				/*if(data[0].REAL_MONEY==-10){
					$("#productDataId").hide();
					$("#productNoDataId").show();
				}else{
					$("#productNoDataId").hide();
					$("#productDataId").show();
				}*/
				_columnChart1("productDataId",title,cols,vals,"#1ed2c7");
			}
		}
	});
}

function _clear(){
	$("#begDate").val("");
	$("#endDate").val("");
}
</script>
</head>
<body>
	<div id="contentDiv" style="padding:4px; width:99%;font-family: '微软雅黑';">
		<input type="hidden" id="refundType" name="refundType"/>
		<input type="hidden" id="rejectReason" name="rejectReason"/>
		<div class="colnums-2-ab-b" style="overflow-x:auto;">
			<div class="toptil" >销售额拓扑</div>
			<div class="search_lis" style="border: 1px solid #e0e0e0;background: #f5f5f5;padding-left:10px;margin-bottom:10px;width:98.5%;">
				<div class="search_lis_se" style="font-size: 14px;margin-bottom: 5px;">
					<span style="margin-left:10px;">交易时间： </span>
					<input type="text" id="begDate" name="begDate" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true,maxDate:'#F{$dp.$D(\'endTime\')}'})" style="width: 110px;height: 24px; padding-left: 3px" onfocus="WdatePicker({position:{left:105,top:88}})" class="Wdate" value="" realvalue="">
					<span style="margin: 0px 5px;">至</span>
					<input type="text" id="endDate" name="endDate" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true,minDate:'#F{$dp.$D(\'begTime\')}'})" style="width: 110px;height: 24px; padding-left: 3px;margin-right: 2px;" onfocus="WdatePicker({position:{left:253,top:88}})" class="Wdate" value="" realvalue="">
					<button type="button" class="save" onclick="_queryList()">查询</button>
					<button type="button" class="save" onclick="_clear()">清空</button>
				</div>
				<div class="wantBuy" id="caigouInfo"></div>
			</div>
			<div class="listed_tb_k" style="width:99.65%; border: none;">
				<div class="title_css">品类销售额饼状图</div>
				<div id="categoryDataId" style="height: 400px"></div>
				<div id="categoryNoDataId" class="no_data_css">暂&nbsp;无&nbsp;数&nbsp;据</div>
				<div class="title_css">品牌销售额柱状图</div>
				<div id="brandDataId" style="height: 400px"></div>
				<div id="brandNoDataId" class="no_data_css">暂&nbsp;无&nbsp;数&nbsp;据</div>
				<div class="title_css">商品销售额柱状图</div>
				<div id="productDataId" style="height: 400px"></div>
				<div id="productNoDataId" class="no_data_css">暂&nbsp;无&nbsp;数&nbsp;据</div>
			</div>
		</div>
		<div class="clear"></div>
	</div>
</body>
<script type="text/javascript">
	$(document).ready(function() {
		_reHeight("rightFrame", "contentDiv");
	});
</script>
<script type="text/javascript">
	//饼状图
	function _pieChart(id,title,vals){
		$('#'+id).highcharts({
	        chart: {
	            plotBackgroundColor: null,
	            plotBorderWidth: 0,
	            plotShadow: false
	        },
	        title: {
	            text: title,
	            align: 'center',
	            verticalAlign: 'middle',
	            y: -130
	        },
	        tooltip: {
	            headerFormat: '{series.name}<br>',
	            pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b><br/>销售额（元）: <b>{point.y:.1f}</b>'
	        },  
	        credits: {
	            enabled: false
	        },
	        plotOptions: {
	            pie: {
	                dataLabels: {
	                    enabled: true,
	                    distance: -50,
	                    style: {
	                        fontWeight: 'bold',
	                        color: 'white',
	                        textShadow: '0px 1px 2px black'
	                    }
	                },
	                startAngle: -90,
	                endAngle: 90,
	                center: ['50%', '75%']
	            }
	        },
	        series: [{
	            type: 'pie',
	            name: title,
	            innerSize: '50%',
	            data: vals
	        }]
	    });
		/*$('#'+id).highcharts({
	        chart: {
	            type: 'pie',
	            options3d: {
	                enabled: true,
	                alpha: 45
	            }
	        },
	        title: {
	            text: title
	        },
	        credits: {
	            enabled: false
	        },
	        plotOptions: {
	            pie: {
	                innerSize: 100,
	                depth: 45
	            }
	        },
	        series: [{
	            name: '销售额',
	            data: vals
	        }]
	    });*/
	}

	//柱状图
	function _columnChart(id,title,colNames,colVals,color){
		$('#'+id).highcharts({
	        chart: {
	            type: 'column',
	            margin: 75,
	            options3d: {
	                enabled: true,
	                alpha: 10,
	                beta: 15,
	                depth: 70
	            }
	        },
	        title: {
	            text: title
	        },
	        colors:[color],
	        credits: {
	            enabled: false
	        },
	        plotOptions: {
	            column: {
	                depth: 25
	            }
	        },
	        xAxis: {
	            categories: colNames
	        },
	        yAxis: {
	            title: {
	                text: null
	            }
	        },
	        series: [{
	            name: '销售额（元）',
	            data: colVals
	        }]
	    });
	}
	function _columnChart1(id,title,colNames,colVals,color){
		$('#'+id).highcharts({
	        chart: {
	            type: 'column',
	            margin: 75,
	            options3d: {
	                enabled: true,
	                alpha: 10,
	                beta: 15,
	                depth: 70
	            }
	        },
	        title: {
	            text: title
	        },
	        colors:[color],
	        credits: {
	            enabled: false
	        },
	        plotOptions: {
	            column: {
	                depth: 25
	            }
	        },
	        xAxis: {
	            categories: colNames,
	            labels: {
	                rotation: -15,
	                style: {
	                    fontSize: '13px',
	                    fontFamily: 'Verdana, sans-serif'
	                }
	            }
	        },
	        yAxis: {
	            title: {
	                text: null
	            }
	        },
	        series: [{
	            name: '销售额（元）',
	            data: colVals
	        }]
	    });
	}
</script>
</html>
